<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .main {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
        }

        .code-line {
            width: 20px;
            min-height: 500px;
            text-align: right;
            overflow-x: hidden;
            overflow-y: hidden
        }

        .code-area {
            width: 90%;
            height: 500px;
            background-color: #d4e4b5;
        }

        textarea {
            /* 控制禁止拖动 */
            resize: none;
            text-wrap: none;
        }

        .result {

        }

        .run-btn {
            width: 200px;
            height: 160px;
            background-color: #00b0ff;
        }

        .run-result {
            width: 81%;
            height: 160px;
            background-color: #d4e4b5;
        }

    </style>
    <script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="main" id="mian">
    <div id="leftBox"><textarea class="code-line" wrap="off" cols="2" id="leftNum" disabled="disabled"></textarea></div>
    <textarea class="code-area" id="test" name="content" onkeydown="keyUp()" onscroll="getId('leftNum').scrollTop = this.scrollTop;"></textarea>
</div>
<div class="main">
    <div class="run-btn">
        <button onclick="runCode()">run</button>
        <button>reset</button>
    </div>
    <div class="run-result"></div>
</div>
<script type="text/javascript">

    var num = "";
    var btn = getId('btn');
    var test = getId('test');
    function getId(obj) {
        return document.getElementById(obj);
    }
    function keyUp(){
        var str = test.value;
        str = str.replace(/\r/gi,"");
        str = str.split("\n");
        n = str.length;
        line(n);
    }
    function line(n){
        var lineobj = getId("leftNum");
        for(var i = 1;i <= n;i ++){
            if(document.all){
                num += i + "\r\n";//判断浏览器是否是IE
            }else{
                num += i + "\n";
            }
        }
        lineobj.value = num;
        num = "";
    }

    (function() {
        keyUp();
    })();

    // 重写console.log方法, 使结果显示到自己的元素中
    console.log = function (value) {
        $('.run-result').text(value);
    }

    function runCode() {
        const code = $('#test').val();
        if ((code ?? "") === "") {
            return;
        }
        try {
            // 这样定义的函数会自己执行
            new Function(code)();
        } catch (e) {
            // 如果传入的code有错误, 则这个构造函数会抛出异常
            console.log(e.message);
        }
    }

</script>
</body>
</html>